<template>
  <view class="attendance-page">
    <!-- 顶部统计卡片 -->
    <view class="stats-card">
      <view class="stats-header">
        <text class="stats-title">本月考勤统计</text>
        <text class="stats-period">2024年1月</text>
      </view>
      <view class="stats-grid">
        <view class="stat-item">
          <view class="stat-value">{{ attendanceStats.totalDays }}</view>
          <view class="stat-label">应出勤天数</view>
        </view>
        <view class="stat-item">
          <view class="stat-value">{{ attendanceStats.actualDays }}</view>
          <view class="stat-label">实际出勤</view>
        </view>
        <view class="stat-item">
          <view class="stat-value">{{ attendanceStats.lateDays }}</view>
          <view class="stat-label">迟到次数</view>
        </view>
        <view class="stat-item">
          <view class="stat-value">{{ attendanceStats.attendanceRate }}%</view>
          <view class="stat-label">出勤率</view>
        </view>
      </view>
    </view>

    <!-- 考勤记录 -->
    <view class="attendance-section">
      <view class="section-header">
        <text class="section-title">考勤记录</text>
        <view class="filter-tabs">
          <text 
            v-for="(tab, index) in filterTabs" 
            :key="index"
            :class="['filter-tab', currentFilter === index ? 'active' : '']"
            @click="setFilter(index)"
          >
            {{ tab }}
          </text>
        </view>
      </view>
      
      <view class="attendance-list">
        <view 
          class="attendance-item" 
          v-for="item in filteredAttendanceList" 
          :key="item.id"
        >
          <view class="item-left">
            <view class="date-info">
              <text class="date">{{ item.date }}</text>
              <text class="weekday">{{ item.weekday }}</text>
            </view>
            <view class="time-info">
              <text class="check-in">签到：{{ item.checkIn }}</text>
              <text class="check-out">签退：{{ item.checkOut }}</text>
            </view>
          </view>
          <view class="item-right">
            <view class="status-badge" :class="item.statusClass">
              {{ item.status }}
            </view>
            <view class="work-hours">
              {{ item.workHours }}小时
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 月度统计图表 -->
    <view class="chart-section">
      <view class="section-title">月度趋势</view>
      <view class="chart-container">
        <view class="chart-bar" v-for="(day, index) in monthlyChart" :key="index">
          <view class="bar-wrapper">
            <view 
              class="bar" 
              :style="{ height: day.attendance ? '60rpx' : '20rpx' }"
              :class="day.attendance ? 'present' : 'absent'"
            ></view>
          </view>
          <text class="bar-label">{{ day.date }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'

// 考勤统计数据
const attendanceStats = ref({
  totalDays: 22,
  actualDays: 20,
  lateDays: 2,
  attendanceRate: 91
})

// 筛选标签
const filterTabs = ref(['全部', '正常', '迟到', '缺勤'])
const currentFilter = ref(0)

// 考勤记录列表
const attendanceList = ref([
  { 
    id: 1, 
    date: '01-15', 
    weekday: '周一',
    checkIn: '08:30',
    checkOut: '17:30',
    status: '正常',
    statusClass: 'normal',
    workHours: 9
  },
  { 
    id: 2, 
    date: '01-16', 
    weekday: '周二',
    checkIn: '08:45',
    checkOut: '17:30',
    status: '迟到',
    statusClass: 'late',
    workHours: 8.75
  },
  { 
    id: 3, 
    date: '01-17', 
    weekday: '周三',
    checkIn: '08:25',
    checkOut: '17:35',
    status: '正常',
    statusClass: 'normal',
    workHours: 9.17
  },
  { 
    id: 4, 
    date: '01-18', 
    weekday: '周四',
    checkIn: '08:50',
    checkOut: '17:30',
    status: '迟到',
    statusClass: 'late',
    workHours: 8.67
  },
  { 
    id: 5, 
    date: '01-19', 
    weekday: '周五',
    checkIn: '08:20',
    checkOut: '17:40',
    status: '正常',
    statusClass: 'normal',
    workHours: 9.33
  }
])

// 月度图表数据
const monthlyChart = ref([
  { date: '1', attendance: true },
  { date: '2', attendance: true },
  { date: '3', attendance: false },
  { date: '4', attendance: true },
  { date: '5', attendance: true },
  { date: '6', attendance: true },
  { date: '7', attendance: false },
  { date: '8', attendance: true },
  { date: '9', attendance: true },
  { date: '10', attendance: true },
  { date: '11', attendance: true },
  { date: '12', attendance: true },
  { date: '13', attendance: false },
  { date: '14', attendance: true },
  { date: '15', attendance: true }
])

// 筛选考勤记录
const filteredAttendanceList = computed(() => {
  if (currentFilter.value === 0) return attendanceList.value
  const statusMap = ['', '正常', '迟到', '缺勤']
  return attendanceList.value.filter(item => item.status === statusMap[currentFilter.value])
})

// 设置筛选
const setFilter = (index) => {
  currentFilter.value = index
}
</script>

<style scoped>
.attendance-page {
  min-height: 1200rpx;
  padding: 0 30rpx 240rpx 30rpx;
  background-color: #efefef;
}

.stats-card {
  margin-top: 30rpx;
  padding: 40rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 20rpx;
  color: #ffffff;
}

.stats-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40rpx;
}

.stats-title {
  font-size: 36rpx;
  font-weight: 600;
}

.stats-period {
  font-size: 28rpx;
  opacity: 0.9;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30rpx;
}

.stat-item {
  text-align: center;
  padding: 20rpx;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 16rpx;
}

.stat-icon {
  font-size: 40rpx;
  margin-bottom: 16rpx;
}

.stat-value {
  font-size: 48rpx;
  font-weight: 600;
  margin-bottom: 8rpx;
}

.stat-label {
  font-size: 26rpx;
  opacity: 0.9;
}

.attendance-section {
  margin-top: 30rpx;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333333;
}

.filter-tabs {
  display: flex;
  background-color: #ffffff;
  border-radius: 20rpx;
  padding: 8rpx;
}

.filter-tab {
  padding: 12rpx 24rpx;
  font-size: 26rpx;
  color: #666666;
  border-radius: 16rpx;
  transition: all 0.3s ease;
}

.filter-tab.active {
  background-color: #667eea;
  color: #ffffff;
}

.attendance-list {
  background-color: #ffffff;
  border-radius: 20rpx;
  overflow: hidden;
}

.attendance-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 2rpx solid #f5f6fa;
}

.attendance-item:last-child {
  border-bottom: none;
}

.item-left {
  flex: 1;
}

.date-info {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
}

.date {
  font-size: 32rpx;
  font-weight: 600;
  color: #333333;
  margin-right: 16rpx;
}

.weekday {
  font-size: 26rpx;
  color: #666666;
}

.time-info {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.check-in, .check-out {
  font-size: 26rpx;
  color: #666666;
}

.item-right {
  text-align: right;
}

.status-badge {
  display: inline-block;
  padding: 8rpx 20rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  margin-bottom: 12rpx;
}

.status-badge.normal {
  background-color: #e8fff0;
  color: #52c41a;
}

.status-badge.late {
  background-color: #fff7e6;
  color: #fa8c16;
}

.status-badge.absent {
  background-color: #fff1f0;
  color: #f5222d;
}

.work-hours {
  font-size: 26rpx;
  color: #666666;
}

.chart-section {
  margin-top: 30rpx;
}

.chart-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  height: 120rpx;
  background-color: #ffffff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-top: 20rpx;
}

.chart-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.bar-wrapper {
  height: 60rpx;
  display: flex;
  align-items: flex-end;
  margin-bottom: 16rpx;
}

.bar {
  width: 16rpx;
  border-radius: 8rpx;
  transition: height 0.3s ease;
}

.bar.present {
  background: linear-gradient(to top, #667eea, #764ba2);
}

.bar.absent {
  background-color: #f0f0f0;
}

.bar-label {
  font-size: 22rpx;
  color: #666666;
}
</style> 